<template>
	<view class="content">
		<view class="header">
			<view class="timeBox">
				<view class="starTime font28">
					<view class="" style="display: flex;align-items: center;justify-content: space-between;width: 90%;">
						<view class="title" @click="starOpen">
							开始日期:{{starTime}}
						</view>
						<view class="title" @click="endOpen">
							结束日期:{{endTime}}
						</view>
					</view>
					<view class="icon">
						<image src="https://wx.caobenjiankang.com/image/shopowner/date.png" mode="aspectFit"></image>
					</view>
				</view>
			<!-- 	<view class="endTime font28" @click="endOpen">
					<view class="title">
						结束日期：{{endTime}}
					</view>
					<view class="icon">
						<image src="https://wx.caobenjiankang.com/image/shopowner/date.png" mode="aspectFit"></image>
					</view>
				</view> -->
			</view>
			<view class="product">
				<picker @change="productChange" :value="index" :range="productList">
					<view class="productB">
						<view class="uni-input">
							<view class="title font28">
								产品名称
							</view>
							<view class="des font28">
								{{productList[index]}}
							</view>
						</view>
						<view class="left">
							<view class="op font28">
								选择
							</view>
							<view class="icon">
								<image src="https://wx.caobenjiankang.com/image/shopowner/1.png" mode="aspectFit"></image>
							</view>
						</view>
					</view>
				</picker>
			</view>
			<view class="product">
				<picker @change="productChanges" :value="indexs" :range="productLists">
					<view class="productB">
						<view class="uni-input">
							<view class="title font28">
								门店
							</view>
							<view class="des font28">
								{{productLists[indexs]}}
							</view>
						</view>
						<view class="left">
							<view class="op font28">
								选择
							</view>
							<view class="icon">
								<image src="https://wx.caobenjiankang.com/image/shopowner/1.png" mode="aspectFit"></image>
							</view>
						</view>
					</view>
				</picker>
			</view>
			<view class="query font28" @click="query">
				查询
			</view>
		</view>
		<view class="box">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower">
				<view class="item" v-for="(item,index) in profitList" :key="index">
					<view class="left">
						<view class="payName">
							<view class="title font30 font500">
								{{item.pay_type}}
							</view>
							<view class="price font30 font500">
								￥{{item.price}}
							</view>
						</view>
						<view class="shopName font30 fontw">
							{{item.store}}
						</view>
					</view>
					<view class="customer">
						<view class="title font28">
							客户名称
						</view>
						<view class="customer_d font28">
							{{item.user}}
						</view>
					</view>
					<view class="placement">
						<view class="title font28">
							订单号:
						</view>
						<view class="placement_d font28">
							{{item.order_sn}}
						</view>
					</view>
					<view class="Z_price">
						<view class="title font28">
							总金额
						</view>
						<view class="Z_price_d font28">
							{{item.price}}
						</view>
					</view>
					<view class="discount">
						<view class="title font28">
							商品名称:
						</view>
						<view class="discount_d font28">
							{{item.goods}}
						</view>
					</view>
					<view class="pay">
						<view class="title font28">
							支付方式
						</view>
						<view class="pay_d font28">
							{{item.pay_type}}
						</view>
					</view>
					<view class="c_time">
						<view class="title font28">
							下单时间
						</view>
						<view class="c_time_d font28">
							{{item.create_time}}
						</view>
					</view>
					<view class="p_time">
						<view class="title font28">
							付款时间
						</view>
						<view class="p_time_d font28">
							{{item.pay_time}}
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<yt-dateTimePicker ref="starShow" @submit="starTimes" :start-year="2000" :end-year="2099" :time-init="starTime"
			:time-hide="[true, true, true, false, false, false]" :time-label="['年', '月', '日', '时', '分', '秒']" />
		<yt-dateTimePicker ref="endShow" @submit="endTimes" :start-year="2000" :end-year="2099" :time-init="endTime"
			:time-hide="[true, true, true, false, false, false]" :time-label="['年', '月', '日', '时', '分', '秒']" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				starTime: '', //开始时间
				endTime: '', // 结束时间
				index: 0,
				indexs: 0,
				productList: [],
				profitList: [],
				list: [],
				lists:[],
				productLists:[]
			};
		},
		onLoad() {
			this.getDatas()
			this.getList()
			this.getCurrentTime()
			
		},
		methods: {
			async getData() {
				const data = await this.$api.shopowner.serviceGoodsLog({
					start_time: this.starTime,
					end_time: this.endTime,
					goods_id:this.list[this.index].id,
					store_id:this.lists[this.indexs].id
				})
				this.profitList = data
			},
			async getDatas() {
				let data = await this.$api.shopowner.storeList()
				if (data.length > 0) {
					this.lists = data
					const list = []
					data.map(item => {
						list.push(item.title)
					})
					this.productLists = list
				}
				if(data.length == 0){
					this.productLists = ['请选择']
				}
			},
			async getList() {
				const data = await this.$api.shopowner.goodsList({
					page: 1,
					limit: 100000,
					name: '',
					carte: 0
				})
				if(data.data.length > 0){
					this.list = data.data
					const list = []
					data.data.map(item => {
						list.push(item.name)
					})
					this.productList = list
				}
				if(data.data.length == 0){
					this.productList = ['请选择']
				}
				this.getData()
			},
			getCurrentTime() {
				const now = new Date();
				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0');
				const day = String(now.getDate()).padStart(2, '0');
				const hours = String(now.getHours()).padStart(2, '0');
				const minutes = String(now.getMinutes()).padStart(2, '0');
				const seconds = String(now.getSeconds()).padStart(2, '0');
				this.starTime = `${year}-${month}-${day}`;
				this.endTime = `${year}-${month}-${day}`;
			},
			productChange(e) {
				this.index = e.detail.value
			},
			productChanges(e) {
				this.indexs = e.detail.value
			},
			starOpen() {
				this.$refs.starShow.show();
			},
			endOpen() {
				this.$refs.endShow.show();
			},
			starClose() {
				this.$refs.starShow.hide();
			},
			endClose() {
				this.$refs.endShow.hide();
			},
			// 开始时间
			starTimes(e) {
				this.starTime = `${e.year}-${e.month}-${e.day}`;
			},
			// 结束时间
			endTimes(e) {
				this.endTime = `${e.year}-${e.month}-${e.day}`;
			},
			query() {
				this.getData()
			}
		}
	}
</script>

<style lang="scss">
	.content {
		.header {
			background-color: #fff;
			padding: 36rpx 37rpx;
			margin-bottom: 16rpx;

			.timeBox {
				.starTime {
					display: flex;
					justify-content: space-between;
					align-items: center;
					border: 2rpx solid #DFDFDF;
					margin-bottom: 18rpx;
					padding: 30rpx 18rpx;

					.title {
						color: #333333;
					}

					.icon {
						width: 30rpx;
						height: 30rpx;

						image {
							width: 30rpx;
							height: 30rpx;
						}
					}
				}

				.endTime {
					display: flex;
					justify-content: space-between;
					align-items: center;
					border: 2rpx solid #DFDFDF;
					margin-bottom: 18rpx;
					padding: 30rpx 18rpx;

					.title {
						color: #333333;
					}

					.icon {
						width: 30rpx;
						height: 30rpx;

						image {
							width: 30rpx;
							height: 30rpx;
						}
					}
				}

			}

			.product {
				border: 2rpx solid #DFDFDF;
				padding: 30rpx 18rpx;
				margin-bottom: 25rpx;

				.productB {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.uni-input {
						display: flex;
						align-items: center;

						.title {
							color: #333333;
							margin-right: 31rpx;
						}

						.des {
							color: #666666;
							;
						}
					}

					.left {
						.op {
							color: #666666;
						}

						.icon {
							width: 13rpx;
							height: 26rpx;
							display: flex;
							align-items: center;

							image {
								width: 13rpx;
								height: 26rpx;
							}
						}
					}
				}
			}

			.query {
				background: #1EB481;
				border-radius: 20rpx;
				height: 75rpx;
				color: #fff;
				text-align: center;
				line-height: 75rpx;
			}
		}

		.box {
			padding: 36rpx 37rpx;

			.scroll-Y {
				height: calc(100vh - 512rpx - 32rpx - 78rpx);

				.item {
					padding: 30rpx;
					background-color: #fff;
					margin-bottom: 18rpx;
					border-radius: 16rpx;

					.left {
						justify-content: space-between;
						margin-bottom: 42rpx;

						.payName {
							display: flex;
							align-items: center;

							.title {
								color: #333333;
								margin-right: 28rpx;
							}

							.price {
								color: #FF5400;
							}
						}

						.shopName {
							color: #1EB481;
						}
					}

					.customer {
						display: flex;
						align-items: center;
						margin-bottom: 42rpx;

						.title {
							color: #A1A7B2;
							width: 160rpx;
						}

						.customer_d {
							color: #333333;
						}
					}

					.placement {
						display: flex;
						align-items: center;
						margin-bottom: 42rpx;

						.title {
							color: #A1A7B2;
							width: 160rpx;
						}

						.placement_d {
							color: #333333;
						}
					}

					.Z_price {
						display: flex;
						align-items: center;
						margin-bottom: 42rpx;

						.title {
							color: #A1A7B2;
							width: 160rpx;
						}

						.Z_price_d {
							color: #FF5400;
						}
					}

					.discount {
						display: flex;
						align-items: center;
						margin-bottom: 42rpx;

						.title {
							color: #A1A7B2;
							width: 160rpx;
						}

						.discount_d {
							color: #FF9F2E;
						}
					}

					.pay {
						display: flex;
						align-items: center;
						margin-bottom: 42rpx;

						.title {
							color: #A1A7B2;
							width: 160rpx;
						}

						.pay_d {
							color: #333333;
						}
					}

					.c_time {
						display: flex;
						align-items: center;
						margin-bottom: 42rpx;

						.title {
							color: #A1A7B2;
							width: 160rpx;
						}

						.c_time_d {
							color: #333333;
						}
					}

					.p_time {
						display: flex;
						align-items: center;
						margin-bottom: 42rpx;

						.title {
							color: #A1A7B2;
							width: 160rpx;
						}

						.p_time_d {
							color: #333333;
						}
					}
				}

			}
		}
	}
</style>